import React, { Component } from 'react';
import AppHeader from './AppHeader';
import AppMain from './Main'
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      header: props.header,
      value: props.value,
      sex: 'female',
    };
  }




  handleChange = event => {
    const target=event.target;
    const name=target.name;

    this.setState((prevState,props) => ({[name]:target.value,header:`${this.props.header} ${target.value}`}));
  }

  render() {
    return (
      <div className="App">
        <AppHeader  header={`${this.state.header} ${this.state.value}`}/>
        <AppMain value={this.state.value} sex={this.state.sex} handleChange={this.handleChange}/>
      </div>
    );
  }

}

export default App;
